<template>
	<view class="app-container">
		<view class="header">
			<view class="header-box">
				<view class="header-box-top">
					<view class="header-left">
						<image class="avatar" :src="userInfo.avatar" mode=""></image>
						<view class="name-box">
							<view class="username">{{ userInfo.username }}</view>
							<view class="level">
								<image class="level-icon" src="../../static/img/member-level/member-level-silver.png"
									mode=""></image>
								<span class="level-name">白银</span>
							</view>
						</view>
					</view>
					<view>
						<view class="header-right">
							<image @tap="checkin" class="checkin-img" src="../../static/img/checkin.png" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="nums-box">
					<view class="nums-item" v-for="item in numsList" :key="item.name" @tap="toTargetPath(item.path)">
						<view class="nums">{{ item.value }}</view>
						<view class="nums-name">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nav">
			<view class="nav-box-wrapper">
				<view class="my-order-box">
					<view class="order-hrader">
						<view class="order-title">我的订单</view>
						<view class="more-order" @tap="toOrderList">更多订单<uni-icons type="forward" size="12"
								color="#606060"></uni-icons></view>
					</view>
					<view class="order-status-box">
						<view class="order-status-item" v-for="item in orderStatusList" :key="item.name">
							<view class="order-icon-box">
								<image :src="item.icon" class="order-status-icon" mode=""></image>
							</view>
							<view class="order-status-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="service-box">
				<view class="service-header">
					<view style="font-weight: 600;">服务与工具</view>
				</view>
				<view class="service-item-box">
					<view class="service-item" v-for="item in serviceList" :key="item.name"
						@tap="toTargetPath(item.path)">
						<view class="service-icon-box">
							<image :src="item.icon" class="service-status-icon" mode=""></image>
						</view>
						<view class="service-status-name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="like">
			<view class="like-header-box">
				<image class="like-icon" src="../../static/img/order/like.png" mode=""></image>
				<text class="like-title">你可能感兴趣</text>
				<image class="like-icon" src="../../static/img/order/like.png" mode=""></image>
			</view>
			<commodity-list ref="productList"></commodity-list>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import CommodityList from '@/components/common/CommodityList.vue'
	export default {
		components: {
			CommodityList
		},
		data() {
			return {
				numsList: [{
						name: '优惠券',
						value: 0,
						url: '',
						path: '/pages/coupon/userCoupon'
					},
					{
						name: '收藏',
						value: 10,
						url: ''
					},
					{
						name: '积分',
						value: 0,
						url: ''
					},
					{
						name: '成长值',
						value: 0,
						url: ''
					}
				],
				serviceList: [{
						name: '地址管理',
						icon: '../../static/img/order/address.png',
						path: '/pages/me/address/address'
					},
					{
						name: '系统设置',
						icon: '../../static/img/order/setting.png',
						path: ''
					}
				],
				orderStatusList: [{
						name: '待付款',
						icon: '../../static/img/order/me-nopay.png',
						url: ''
					},
					{
						name: '待发货',
						icon: '../../static/img/order/me-daifahuo.png',
						url: ''
					},
					{
						name: '待收货',
						icon: '../../static/img/order/me-daishouhuo.png',
						url: ''
					},
					{
						name: '已完成',
						icon: '../../static/img/order/me-finish.png',
						url: ''
					},
					{
						name: '退款/售后',
						icon: '../../static/img/order/me-shouhou.png',
						url: ''
					}
				],
				userInfo: {}
			}
		},
		onShow() {
			this.initData()
			this.getCouponNum()
		},
		onReachBottom() {
			let productComponentList = this.$refs.productList
			productComponentList.forEach(item => {
				item.queryParams.pageNo += 1
				item.listData()
			})
		},
		methods: {
			toTargetPath(path) {
				uni.navigateTo({
					url: path

				})
			},
			checkin() {
				$http.request({
					url: `/member/member/checkin`
				}).then(res => {
					uni.showToast({
						duration: 3000,
						title: res.message,
						icon: 'none'
					})
					this.initData()
				})
			},
			getCouponNum() {
				$http.request({
					url: `/coupon/coupon/availableNum`
				}).then(res => {
					if (res.success) {
						this.numsList[0].value = res.data
					}
				})
			},
			initData() {
				$http.request({
					url: `/member/member/info`
				}).then(res => {
					if (res.success) {
						this.userInfo = res.data
						this.numsList[2].value = this.userInfo.integral
						this.numsList[3].value = this.userInfo.growth
					}
				})
			},
			toOrderList() {
				uni.navigateTo({
					url: '/pages/order/order-list'
				})
			}
		}
	}
</script>

<style scoped>
	.app-container {
		background-color: #F0F1F5;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}

	.content {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.header {
		padding: 0;
		background-color: #FFF;
		background: linear-gradient(to bottom right, #FFF3F6 0%, #FCFCFC 50%, #FCFCFC 50%, #FFF3F6 100%);
	}

	.nav {
		background: linear-gradient(to right, #FCFCFC, #FEF3F6),
			linear-gradient(to bottom, #FCFCFC, #F0F1F5);
		background-repeat: no-repeat;
		.nav-box-wrapper {
			padding: 0rpx 20rpx 0 20rpx;
		}
	}

	.like-header-box {
		/* margin-top: 10rpx; */
		text-align: center;
	}

	.like-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.like-title {
		font-size: 26rpx;
	}

	.nums-box {
		/* margin-top: 20rpx; */
		/* background-color: #FFF; */
		/* border-radius: 16rpx; */
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	.nums-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nums {
		font-weight: 600;
		font-size: 30rpx;
	}

	.nums-name {
		font-size: 20rpx;
		color: #606060;
	}

	.header-box {
		padding: 20rpx 20rpx 0 20rpx;
	}

	.header-box-top {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.header-left {
		display: flex;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		border: 1px #E4E4E4 solid;
	}

	.name-box {
		display: flex;
		flex-direction: column;
		height: 100rpx;
		justify-content: center;
		padding-left: 15rpx;
	}

	.level-icon {
		width: 22rpx;
		height: 22rpx;
	}

	.username {
		font-weight: 700;
	}

	.level-name {
		font-size: 24rpx;
		color: #AAB3D6;
	}

	.my-order-box {
		height: 230rpx;
		background-color: #FFF;
		border-radius: 16rpx;
	}

	.service-box {
		margin-top: 30rpx;
		height: 230rpx;
		background-color: #FFF;
		border-radius: 16rpx;
	}

	.order-title {
		font-weight: 600;
	}

	.order-status-box {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.service-item-box {
		display: flex;
		justify-content: flex-start;
		padding: 0 20rpx;
		width: 280rpx;
	}

	.order-status-item {
		width: 95%;
		margin: 0 auto;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.service-item {
		margin: 0 auto;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order-icon-box {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.service-icon-box {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.order-status-icon {
		width: 65rpx;
		height: 65rpx;
	}

	.service-status-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.order-status-name {
		font-size: 22rpx;
		color: #606060;
		text-align: center;
	}

	.service-status-name {
		font-size: 22rpx;
		color: #606060;
		text-align: center;
	}

	.order-hrader {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
	}

	.service-header {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
	}

	.more-order {
		font-size: 22rpx;
		color: #606060;
	}

	.checkin-img {
		width: 40rpx;
		height: 40rpx;
	}

	.header-right {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>